<template>
  <el-dialog
    title="上传"
    :visible.sync="show"
    width="400px"
  >
    <el-upload
      class="upload-demo"
      drag
      :name="felidName"
      :action="baseUrl + addr"
      :accept="fileTypes"
      :on-success="close"
      :on-error="reportError"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或者点击上传
      </div>
    </el-upload>
  </el-dialog>
</template>

<script lang="ts">
import axios from "../../utils/request";
import { Message, Notification } from "element-ui";

export default {
  props: {
    show: {
      type: Boolean,
      required: true,
    },
    name: {
      type: String,
      required: false,
      default: () => ""
    },
    type: {
      type: String,
      required: false,
      default: () => ""
    },
    addr: {
      type: String,
      required: false,
      default: () => ""
    }
  },

  setup(props, ctx) {
    const baseUrl = axios.defaults.baseURL;

    function close() {
      Notification.success("上传成功.")
      ctx.emit("close")
    }

    function reportError(err) {
      Message.error(JSON.parse(err.message).message);
    }

    return {
      baseUrl,

      close,
      reportError,
    }
  }
}
</script>
